
import Fetch from '../modules/fetch'
import {Link} from 'react-router'
import  indexData from './indexData'
import $ from "jquery"

class ContainerComponent extends React.Component {   
    constructor(props,context){
        super(props,context)

        this.state={
            DataList:[],
            url:this.props.url?this.props.url:'',
            urlObj:this.props.urlObj?this.props.urlObj:'',
            idNum:this.props.idNum?this.props.idNum:'',
            title:this.props.title,
            todo:this.props.todo
        }
    }
    
    componentWillMount(){
        this.getData()
    }
    getData(){
        let that=this
        let url=this.state.url
        let obj=this.state.urlObj!=''?eval("("+this.state.urlObj+")"):''
        let num=this.state.idNum
        // console.log(obj)
        //判断是连网获取还是本地json文件获取
        if(url!=''&&obj!=''){
            Fetch.Get(url,obj).then(res=>{
                // console.log(res)
                return res.json()
            }).then(json=>{
                // console.log(json.data)
                that.setState({DataList:json.data})
            })
        }else{
            that.setState({DataList:indexData.data[num]})
        }
        // console.log(indexData.data[num])
        
    }

    showData(){
        let that = this
        let arr = []        
        this.state.DataList.forEach((item,i)=>{
//	console.log(item)
            if(i<4){
                //替代获取图片路径的http协议为https协议
                let _src = item.pic.replace("http","https")
                //判断是连网获取的，或者是本地json文件获取的
                let _play = item.play?item.play:item.stat.view
                let _review = item.review?item.review:item.stat.danmaku
                arr.push(
                	
                    //拼接
                    <Link to={"/video/"+item.aid}  className="container-list__item">
                        <div className="container-list__item--content">

                            <img src={this.state.url!=''?_src+'@339w_212h.webp':_src}  className="video-image"/>
                            <p>
                                <span>
                                    <i className="iconfont icon-shipin"></i>
                                    <b>{_play>10000?((_play)/10000).toFixed(1)+'万':_play}</b>
                                </span>
                                <span>
                                    <i className="iconfont icon-mulu"></i>
                                    <b>{_review>10000?((_review)/10000).toFixed(1)+'万':_review}</b>
                                </span>
                            </p>
                        </div>
                        <div className="container-list__item--title">{item.title}</div>
                    </Link>
                )
            }
            
        })
        return arr;
    }
    
    changeTothat(){
		$(location).attr('href', '#/tuijian');
    	
    }
    
    render(){
        return (
            <div className="container-box">
                <div className="container-header" onClick={this.changeTothat}>
                    <h5><i className="iconfont">huo</i>{this.state.title}</h5>
                    <Link to="" className="ranking"><i className="iconfont">bang</i><b>{this.state.todo}</b><i className="">></i></Link>
                </div>
                <div className="container-list">
                    {this.showData()}
                </div>
            </div>
        )
    }
    componentDidUpdate() {
        // console.log( $(".video-image"))
        $(".video-image").each((index, item)=>{
            $(item).on("error", ()=>{
                $(item).attr("src", "./lib/images/403.png")
            })
        })
    }
    
}
//定义默认属性
ContainerComponent.defaultProps={

}



export default ContainerComponent